<template>
	<view class="container">
		<!-- 提示信息 -->
		<image src="/static/logo.png" mode="" class="logo"></image>
		<text class="title">一键登录</text>
		<text class="tip">请点击下方按钮授权手机号登录</text>

		<!-- 登录按钮 -->
		<button class="login-btn" open-type="getPhoneNumber" @getphonenumber="handleGetPhoneNumber">
			授权手机号登录
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '', // 微信登录凭证
			};
		},
		methods: {
			// 处理获取手机号事件
			async handleGetPhoneNumber(e) {
				let _this = this;
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					uni.login({
						provider: 'weixin', //使用微信登录
						onlyAuthorize: false,
						success: function (loginRes) {
							_this.$api.user.getOpenid({
								"code": loginRes.code,
							}).then((openRes) => {
								console.log("res",openRes);
								_this.$api.user.getPhone({
									"encrypdata": e.detail.encryptedData,
									"ivdata": e.detail.iv,
									"sessionkey": openRes.session_key,
									"openid": openRes.openid,
								}).then((phRes) => {
									console.log("res",phRes);
									// 登录成功
									uni.showToast({
										title: '登录成功',
										icon: 'success'
									});
									// 保存用户信息（如 token）
									uni.setStorageSync('HGCAccessToken', phRes.accessToken);
									uni.navigateBack();
								})
							})
						}
					});
				} else {
					uni.showToast({
						title: '用户拒绝授权',
						icon: 'none'
					});
				}
			},
		},
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		padding: 20px;
		background-color: #f5f5f5;
	}
	.logo{
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		margin-bottom: 30rpx;
	}
	.title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.tip {
		font-size: 14px;
		color: #666;
		margin-bottom: 40px;
	}

	.login-btn {
		width: 80%;
		background-color: #2979ff;
		color: #fff;
		font-size: 16px;
		border-radius: 5px;
		margin-bottom: 120rpx;
	}
</style>